<template>
  <div :class="className" />
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import tableTheme from "./macarons.json";
export default {
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    },
    smooth: {
      // 是否圆滑曲线
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        if (val && val.yData && val.yData.length > 0) {
          this.setOptions(val);
        } else {
          this.setOptions({ xName: "", yName: "", seriesData: [], xData: [], yData: [], markLine: {} });
        }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      echarts.registerTheme("tableTheme", tableTheme);
      this.chart = echarts.init(this.$el, "tableTheme");
      // this.chart = echarts.init(this.$el, 'macarons')
      // this.setOptions(this.chartData)
    },
    setOptions({ xName, yName, seriesData, xData, yData, markLine }) {
      const options = {
        grid: {
          left: 30,
          right: 20,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        xAxis: {
          name: xName,
          nameLocation: "middle",
          nameTextStyle: {
            lineHeight: 25
          },
          boundaryGap: false,
          data: xData,
          minorTick: {
            show: true
          }
        },
        yAxis: {
          name: yName,
          nameLocation: "middle",
          nameTextStyle: {
            lineHeight: 30
          },
          min: 0,
          // max: 100,
          minorTick: {
            show: true
          }
          // minorSplitLine: {
          //   show: true,
          //   lineStyle: {
          //     color: "#333"
          //   }
          // },
        },
        series: [
          {
            data: yData,
            connectNulls: true,
            smooth: this.smooth, // 是否圆滑曲线
            type: "line",
            markLine: {
              // symbol: ['circle', 'arrow'], // 定义两端的标记类型
              symbolSize: [1], // 定义标记大小
              label: {
                show: false
              },
              data: [
                {
                  name: "",
                  yAxis: markLine?.yAxis || ""
                },
                {
                  name: "",
                  xAxis: markLine?.xAxis || ""
                }
              ],
              silent: true
            }
          }
        ]
      };
      // console.log(JSON.stringify(options));
      // console.log(JSON.stringify(xData));
      // console.log(JSON.stringify(yData));
      this.chart.setOption(options);
    }
  }
};
</script>
